<template>
  <nuxt-link
    v-if="user"
    class="avatar-a"
    :to="'/user/' + user.id"
    :class="[sizeClass]"
    :style="extraStyle"
  >
    <img
      v-if="hasAvatarUrl && !loadError"
      :src="avatarUrl"
      class="avatar"
      :class="[sizeClass, roundClass, borderClass]"
      :alt="user.nickname"
      @error="error"
    />
    <span
      v-else-if="styleText"
      :class="['avatar', sizeClass, roundClass, borderClass]"
      :style="styleText"
    >
      {{ usernameAt }}
    </span>
  </nuxt-link>
</template>

<script>
import stringToColor from '~/utils/stringToColor'

export default {
  name: 'Avatar',
  props: {
    user: {
      type: [Object, String],
      default: () => {},
    },
    size: {
      type: [Number, String],
      default: 50,
    },
    round: {
      type: Boolean,
      default: false,
    },
    hasBorder: {
      type: Boolean,
      default: false,
    },
    extraStyle: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      loadError: false,
      sizes: {
        100: 'font-size: 40px;line-height: 100px;border-radius: 2px',
        80: 'font-size: 32px;line-height: 80px;border-radius: 2px',
        70: 'font-size: 28px;line-height: 70px;border-radius: 2px',
        60: 'font-size: 26px;line-height: 60px;border-radius: 2px',
        50: 'font-size: 24px;line-height: 50px;border-radius: 2px',
        45: 'font-size: 22px;line-height: 45px;border-radius: 2px',
        40: 'font-size: 20px;line-height: 40px;border-radius: 2px',
        35: 'font-size: 18px;line-height: 30px;border-radius: 2px',
        30: 'font-size: 18px;line-height: 30px;border-radius: 2px',
        20: 'font-size: 10px;line-height: 20px;border-radius: 2px',
      },
    }
  },
  computed: {
    hasAvatarUrl() {
      return this.avatarUrl
    },
    avatarUrl() {
      return this.user.smallAvatar || this.user.avatar
    },
    usernameAt() {
      let c = this.user.nickname
        ? this.user.nickname.charAt(0).toUpperCase()
        : ''
      if (!c) {
        c = this.user.username ? this.user.username.charAt(0).toUpperCase() : ''
      }
      return c
    },
    styleText() {
      return `background-color: #${stringToColor(this.usernameAt)};${
        this.sizes[this.size]
      }`
    },
    sizeClass() {
      return ['avatar-size-' + this.size]
    },
    roundClass() {
      return this.round ? 'round' : ''
    },
    borderClass() {
      return this.hasBorder ? 'has-border' : ''
    },
  },
  methods: {
    error() {
      this.loadError = true
    },
  },
}
</script>

<style lang="scss" scoped>
.avatar-size-100 {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 2px;
}
.avatar-size-80 {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  border-radius: 2px;
}

.avatar-size-70 {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  border-radius: 2px;
}

.avatar-size-60 {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 2px;
}
.avatar-size-50 {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 2px;
}
.avatar-size-45 {
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
  border-radius: 2px;
}
.avatar-size-40 {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 2px;
}
.avatar-size-35 {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  border-radius: 2px;
}
.avatar-size-30 {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 2px;
}
.avatar-size-20 {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 2px;
}

.round {
  border-radius: 50% !important;
}

.avatar-a {
  display: block;
  position: relative;
}

.avatar {
  &.has-border {
    border: 1px solid #e8e8e8;
  }
}

img.avatar {
  object-fit: cover;
  transition: all 0.5s ease-out 0.1s;

  &:hover {
    transform: matrix(1.04, 0, 0, 1.04, 0, 0);
    backface-visibility: hidden;
  }
}
span.avatar {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
</style>
